<template>
  <div>
    <h3>DirectiveDemo</h3>
    <p>userInput {{ userInput }}</p>
    <input
      type="text"
      :value="userInput"
      v-debounce:input="{
        delay: 1000,
        handler: onInput,
      }"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

const userInput = ref<string>("");

const onInput = (e: any) => (userInput.value = e.target.value);
</script>

<style lang="scss" scoped></style>
